<template>
    <view class="app">
        <view class="app-container">
            <!-- 菜单 -->
            <view class="top-warp">
            	<view class="nav">
            		<view v-for="(nav, i) in navList" :key="i" :class="{'active':curIndex===i}" @click="changeTab(i)">{{nav.name}}</view>
            	</view>
            </view>
			<!-- 我打印的 -->
			<mescroll-order :i="0" :index="curIndex" @toFeedbackDetails="toFeedbackDetails"></mescroll-order>
			
			<!-- 我发布的 -->
			<mescroll-order :i="1" :index="curIndex" @toFeedbackDetails="toFeedbackDetails"></mescroll-order>

			<!-- 我接单的 -->
			<mescroll-order :i="2" :index="curIndex" @toFeedbackDetails="toFeedbackDetails"></mescroll-order>
        </view>
    </view>
</template>

<script>
    import MescrollOrder from './components/mescroll-order.vue';

    export default {
        components: {
			MescrollOrder
        },
        name: "feedbackOrderType",
        onLoad(options) {
            this.type = options.type
        },
        data() {
            return {
				curIndex: 0,
                navList: [
                    { name: '我打印的', key: 1 },
                    { name: '我提交的', key: 2 },
                    { name: '我接单的', key: 3 }
                ]
            };
        },
        methods: {
            // 切换菜单
            changeTab (i) {
            	this.curIndex = i
            },
			toFeedbackDetails ({type, id}) {
				uni.navigateTo({
					url: `/user-pages/feedbackDetail?orderId=${id}&type=${type}`
				});
			}
        }
    }
</script>

<style scoped>
	.top-warp{
		z-index: 9990;
		position: fixed;
		top: --window-top; /* css变量 */
		left: 0;
		width: 100%;
		height: 60upx;
		background-color: white;
	}
	.top-warp .tip{
		font-size: 28upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
	}
	.top-warp .nav{
		text-align: center;
		height: 60upx;
		border-bottom: 1upx solid #ddd;
	}
	.top-warp .nav view{
		display: inline-block;
		width: 22%;
		line-height: 60upx;
		font-size: 28upx;
	}
	.top-warp .nav .active{
		border-bottom: 2upx solid #A5C3F7;
		color: #A5C3F7;
	}
</style>
